<style>
    #header {
        height: 25px;
    }

    .header-title {
        width: 70%;
        margin-top: 1px;
        margin-left: 4px;
    }

    #header img {
        height: 15px;
        /*margin-top: 5px;*/
        float: right;
        margin-right: 2px;
    }

    #power-bar-container {
        height: 13px;
        width: 35px;
        border: 1px solid #FFF;
        float: right;
        border-radius: 7px;
        margin-top: 0px;
        margin-right: 2px
    }

    #power-bar-power {
        float: left;
        height: 100%;
        width: 50%;
        border-radius: 7px;
        background: #37c337;
        text-align: center;
        color: #fff;
        font-size: 10px;
    }

    #power-number {
        margin-right: 5px;
        /* style="background-image: url('assets/images/charging.png');" */
    }

    #power-bar-number {
        /* display: none; */
    }

    #power-bar-charging {
        display: none;
    }
</style>

<div id="header" ng-show='show_header == true'>
    <div class="flex-row">
        <span class="header-title">{{title| translate}}{{ip_address}}</span>


        <img src="assets/themes/banbao-v1/status-wifi.jpg" alt="" />
        <img src="assets/themes/banbao-v1/status-bluetooth.jpg" alt="" />
        <span id="power-bar-container">
            <span id="power-bar-power">
            </span>
        </span>

        <span id="power-bar-number">

        </span>
        <img id="power-bar-charging" src="assets/images/charging.png" />
    </div>
</div>